<template>
  <div class="home">
    <router-view></router-view>
    <div class="footer iphonex">
      <div class="footer-content iphonex flex" v-bgBlur hls="rgba(247, 247, 247, 0.86)">
        <router-link tag="div" active-class="active" :to="item.to" class="iterm flex1" v-for="(item,index) in footer" :key="`${index}/${item.name}`">
          <img :src="activeRooteIcon(item)" class="icon"/>
          <p class="txt">{{item.name}}</p>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
//components
import Find from "../Find";

import { mapState, mapActions, mapGetters } from "vuex";

export default {
  name: "home",
  data(){
    return {
      footer:[
        {name:'发现',activeIcon:"assets/logo.png",to:'/find',icon:"assets/img/luyin.png"},
        {name:'视频',activeIcon:"assets/logo.png",to:'/video',icon:"assets/img/luyin.png"},
        {name:'我的',activeIcon:"assets/logo.png",to:'/my',icon:"assets/img/luyin.png"},
        {name:'朋友',activeIcon:"assets/logo.png",to:'/friend',icon:"assets/img/luyin.png"},
        {name:'账号',activeIcon:"assets/logo.png",to:'/account',icon:"assets/img/luyin.png"},
      ]
    }
  },
  components: {
    Find
  },
  computed: {
    ...mapState("Home", ["msg", "num"]),
    ...mapGetters("Home", ["fullNum"])
  },
  mounted(){
    console.log(this.$route.path)
  },
  methods: {
    ...mapActions("Home", ["add"]),

    //获取当前footer的icon图标
    activeRooteIcon(footItem){
      if(this.$route.path === footItem.to){
        return require(`@/${footItem.activeIcon}`)
      }else{
        return require(`@/${footItem.icon}`)
      }
    }
    
  }
};
</script>

<style lang="scss" scoped>
.footer {
  height: 50px;
  .footer-content {
    height: 50px;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    .iterm {
      text-align: center;
      color: $higColor;
      .icon{
        display: block;
        width: 25px;
        height: 25px;
        margin: 5px auto 3px;
      }
      &.active{
        .icon{
          transform: scale(1.2);
        }
      }
    }
  }
}
</style>
